{% extends 'tend/common/base.html' %}
{% import "tend/macros/_flash.html" as flash_macros %}
{% block title %}注册会员-何三笔记{% endblock %}
{% block css %}
{{super()}}
<link href="{{url_for('admin.static',filename='ajax/libs/toastr/toastr.min.css')}}" rel="stylesheet" />
{% endblock %}
{% block main %}
<div class="container">
    <div class="row">
        <div class="col-12 col-sm-8 col-md-6 offset-sm-2 offset-md-3 px-xl-5">
            <div class="card rounded-0 px-3 px-lg-4">
                <div class="card-header text-center bg-white py-2">
                    <h3 class="my-1 text-info">注册</h3>
                </div>
                <div class="card-body card-login">

                    <form class="signup" id="signup_form" method="post">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        {{flash_macros.flash_msg()}}
                        <div id="div_id_username" class="form-group"> 
                            <label for="username" class="col-form-label  requiredField">
                                账号<span class="asteriskField">*</span> </label>
                            <div class=""> 
                                <input type="text" class="form-control" autofocus name="username" placeholder="账号"
                                    required>
                            </div>
                        </div>
                        <div id="div_id_password1" class="form-group"> 
                            <label for="password" class="col-form-label  requiredField">
                                密码<span class="asteriskField">*</span> </label>
                            <div class=""> 
                                <input type="password" class="form-control" name="password" required placeholder="密码">
                            </div>
                        </div>
                        <div id="div_id_email" class="form-group"> 
                            <label for="email" class="col-form-label  requiredField">
                                E-mail<span class="asteriskField">*</span> </label>
                            <div class="">
                                <div class="input-group">
                                    <input type="email" class="form-control" name="email" autofocus placeholder="E-mail地址" aria-label="email"
                                        aria-describedby="button-addon2" required value="">
                                    <div class="input-group-append">
                                        <button id="send-yzm-btn" class="btn btn-outline-info" type="button"
                                            id="button-addon2"><span id="countdown-container">发送邮件验证码</span></button>
                                    </div>
                                </div> 
                            </div>
                        </div>
                        <div id="div_id_password2" class="form-group"> 
                            <label for="yzm" class="col-form-label  requiredField">
                                验证码<span class="asteriskField">*</span> </label>
                            <div class=""> 
                                <input type="text" class="form-control" name="yzm" required placeholder="验证码">
                            </div>
                        </div>
                        <a class="secondaryAction" href="{{url_for('.login')}}">已有账号登录</a>
                        <button type="submit" class="pull-right btn btn-info btn-sm rounded-2">注册</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block js %}
{{ super() }}
<script src="{{url_for('admin.static',filename='ajax/libs/toastr/toastr.min.js')}}"></script>
<script>
    $(function () {
        $('#send-yzm-btn').click(function () {
            let send_btn = $(this);
            let email = $.trim($('input[name="email"]').val())
            if (email == '') {
                toastr.error('写入正确邮箱地址');
                return
            }
            let formData = new FormData()
            formData.append('email', email)
            $.ajax({
                url: '{{url_for("main.yzm_mcode")}}',
                type: "post",
                data: $("form").serialize(),
                dataType: 'json',
                success: function (res) {
                    // console.log(res)
                    if (res.code == 0) {
                        toastr.success(res.msg);
                        send_btn.prop('disabled', true)
                        countdown(10); // 60秒倒计时
                    } else {
                        toastr.error(res.msg);
                    }
                },
                fail: function (res) {
                    toastr.error('网络错误');
                }
            })
        });
    });

    function countdown(seconds) {
        var remainingSeconds = seconds;
        var countdownInterval = setInterval(function () {
            if (remainingSeconds <= 0) {
                clearInterval(countdownInterval); // 清除计时器
                $('#send-yzm-btn').prop('disabled', false)
                $('#countdown-container').text('发送邮件验证码')
                // TODO: 倒计时结束之后的逻辑
            } else {
                // 更新剩余时间并显示出来
                remainingSeconds--;
                var countdownContainer = document.getElementById("countdown-container");
                countdownContainer.textContent = remainingSeconds + "秒后可重新发送";
            }
        }, 1000);
        
    }
</script>
{% endblock %}